//我先要实现全选框的关联
console.log("明天会更好");
var weight=[2360,5000,400];
var str=
		    '<br>'+
			'<ul>'+
			    '<li class="milk4"><input type="checkbox" class="checkbox2" onchange="priming()"></li>'+
				'<li class="milk5"></li>'+
				'<li class="milk6">'+
				 '   <div class="milk60"><button class="milk61"> 京东超市</button>'+ 
				  '  </div>	'+
				'</li>'+
				'<li class="milk7">￥27.90<br><select class="milk71"><option>促销</option></select></li>'+
				'<li class="milk8">'+
				 '   <div class="milk81">'+
				  '      <input class="subtract" type="button"value="-" onclick="plu(this)">'+
				   '     <input class="show" type="button" value="0">'+
					'    <input class="plus" type="button" value="+" onclick="plu(this)"><br>'+
				    '	有货'+
					'</div>'+
				'</li>'+
                '<li class="milk9">'+
				 '   <div class="milk91">'+
				  '  	<span class="milk100">￥0.00</span>'+
					'</div>'+
		'		</li>'+
		'		<li class="milk10"><p onclick="remove(this)">删除</p><span>移到我的关注</span></li>'+
		'	</ul>';
function plu(but){//这是一个实现加减的函数
	//获取显示节点
	var show=document.getElementsByClassName("show");
	//获取加按钮
	var plus=document.getElementsByClassName("plus");
	//获取减按钮
	var subtract=document.getElementsByClassName("subtract");
	//获取当前节点的父节点
	var mi=but.parentNode;
	//通过当前节点父节点获取显示节点
	var show1=mi.getElementsByClassName("show")[0];
	//用一个变量保存获取到show1的value值
	var sum=parseInt(show1.value);
	if(but.value=="+"){
	    sum++;
	}
    else{
	    if(sum!=0){	
	        sum--;
	    }
	}

	show1.value=sum;
    //现在要把价格加上，那么我要获取价格所在的位置
	//还是通过当前节点父元素找到价格所在位置
	//父元素找不到 我要到当前节点的爷爷的爸爸元素去找它
	var  price=mi.parentNode.parentNode.getElementsByClassName("milk7")[0];
     //提取价格
	price=parseFloat(price.innerHTML.slice(1));
	//拿到之后用它乘以数量放在小计里面
    // 要获取小计节点所在位置，同样我们可以通关当前节点的爷爷的爸爸找到它；
	var subtotal=mi.parentNode.parentNode.getElementsByClassName("milk100")[0];
    //获取到小计节点之后。将单价乘数量放进去,要保留两位小数
    //我也可以通过价格来区分
	console.log(price);
	subtotal.innerHTML="￥"+(price*sum).toFixed(2);
	switch(price){
	    case 34.8:
			var temp=weight[0]/1000;
		    subtotal.innerHTML="￥"+(price*sum).toFixed(2)+"<br>"+temp*sum+"kg";
			break;
		case 27.9:
			var temp=weight[1]/1000;
		    subtotal.innerHTML="￥"+(price*sum).toFixed(2)+"<br>"+temp*sum+"kg";
			break;
		case 79.9:
			subtotal.innerHTML="￥"+(price*sum).toFixed(2)+"<br>"+weight[2]*sum+"g";

	}
	
	//重量最后补
	//接下来我要将 数量和小计放到总计中；同过全选框触发，这个可以重新写一个函数
    scan();
}
//获取全选
var checkbox1=document.getElementsByClassName("checkbox1");
for(j=0;j<checkbox1.length;j++){
    checkbox1[j].onchange=function(){//状态改变事件
	    //获取京东自营选项
	    var checkbox=document.getElementsByClassName("checkbox");
        //获取京东好店
		var checkbox2=document.getElementsByClassName("checkbox2");
	 
        for(var n=0,len=checkbox.length;n<len;n++){//京东自营的和全选
	        checkbox[n].checked=this.checked;
	    }
        for(var m=0,len=checkbox2.length;m<len;m++){//京东好店和全选
		    checkbox2[m].checked=this.checked;
		
		}
        for( var o=0,len=checkbox1.length;o<len;o++){//两个全选关联
		    checkbox1[o].checked=this.checked;
		
		}
		
		scan();

   }
   
}
//根据观察，这个购物车是由两个购物车组成的，京东自营和京东好店	，那么我要分开写
//京东自营
 //获取京东自营选项
 var checkbox=document.getElementsByClassName("checkbox");
 //获取京东好店
 var checkbox2=document.getElementsByClassName("checkbox2");

//京东自营全选选中
	checkbox[0].onchange=function(){  
		for(var i=0,len=checkbox.length;i<len;i++){
        checkbox[i].checked=checkbox[0].checked;
        }
	    scan();
    }
//京东好店全选选中
	checkbox2[0].onchange=function(){
	    for(var i=0,len=checkbox2.length;i<len;i++){
		checkbox2[i].checked=checkbox2[0].checked;
		
		}
	    scan();
	}
function scan(){//扫描函数，每做一次改变就扫描一下那些状态是选中的的内容
    var checkbox=document.getElementsByClassName("checkbox");
        //获取京东好店
	var checkbox2=document.getElementsByClassName("checkbox2");
    var sums=0;//总价
	var amount=0;//总数量；
    for(var i=1;i<checkbox.length;i++){  //京东自营购物车
	    if(checkbox[i].checked){//如果当前是选中状态
			//获取当前选中状态的小计
		    var fu=parseFloat(checkbox[i].parentNode.parentNode.getElementsByClassName("milk100")[0].innerHTML.slice(1));
		    sums+=fu;
			//获取当前选中状态的数量
			var temp=parseInt(checkbox[i].parentNode.parentNode.getElementsByClassName("show")[0].value);
			amount+=temp;
		
		}
	   
	}
	 for(var i=1;i<checkbox2.length;i++){ //京东好店购物车
	    if(checkbox2[i].checked){//如果当前是选中状态
			//获取当前选中状态的小计
		    var fu=parseFloat(checkbox2[i].parentNode.parentNode.getElementsByClassName("milk100")[0].innerHTML.slice(1));
		    sums+=fu;
			//获取当前选中状态的数量
			var temp=parseInt(checkbox2[i].parentNode.parentNode.getElementsByClassName("show")[0].value);
			amount+=temp;
		
		}
	   
	}
	var one=0;//京东自营
	var two=0;//京东好店
    //非全选状态全选框不勾中,单选框全选中，全选框也选中
	//京东自营
	for(var i=1;i<checkbox.length;i++){
	    if(checkbox[i].checked==true){
		    one++;
		}
	}
	if(one==checkbox.length-1&&one!=0){
	    checkbox[0].checked=true;
	}
    for(var i=1;i<checkbox.length;i++){
	    if(checkbox[i].checked!=true){
		    checkbox[0].checked=false;
		}
    }

	//京东好店
	for(var i=0;i<checkbox2.length;i++){
	    if(checkbox2[i].checked==true){
		    two++;
		}
	} 
	if(two==checkbox2.length-1&&two!=0){
	    checkbox2[0].checked=true;
	}
	for(var i=0;i<checkbox2.length;i++){
	    if(checkbox2[i].checked!=true){
		    checkbox2[0].checked=false;
		}
	}
	
	//全选，根据京东自营和京东好店两个全选框是否勾中判断两个总全选是否勾中
	for(var i=0;i<checkbox1.length;i++){
        if(checkbox[0].checked==false||checkbox2[0].checked==false){
	        checkbox1[i].checked=false;
     	}
	}
	//当京东自营和京东好店都选中的时候全选也选中
	for(var i=0;i<checkbox1.length;i++){
	    if(checkbox[0].checked==true&&checkbox2[0].checked==true){
		    checkbox1[i].checked=true;
		}
	
	}
	//还有一个重量
    
	//接下来把获得的数据显示到指定的位置，获取数量和总价的位置
	var  check241=document.getElementsByClassName("check241")[0];
	var  check251=document.getElementsByClassName("check251")[0];
	console.log(check241);
	console.log(check241.innerHTML);
	console.log(check251);
	console.log(check251.innerHTML);
	check251.innerHTML=amount;
	check241.innerHTML=sums.toFixed(2);
    console.log(sums);
    console.log(amount);
	

    
}
//添加功能
    //通过这种方式写在一函数里就不能触发了，要先找到目标再触发
    //innerHTML获取的是文本属性，所以图片不能用这个，那么图片这个节点必须创造
    //保存添加购物车需要的信息，根据观察，图片不同，说明不同，价格不同
	//图片
	var pictrue=["img\莫斯利安_big.png","img\牛肉.png","img\德芙_03.png","img\播放器_03.png"];
	//说明
	var explain=["光明 莫斯利安 常温酸奶牛奶(原<br>味)350g*6盒/礼盒装","科尔沁 休闲肉脯零食 内蒙古特产手撕<br>风干牛肉孜然味400g"," 德芙Dove巧克力分享碗装 什锦牛奶棒<br>仁葡萄干巧克力 婚庆 礼品 糖果 休闲","网易云音乐车载音乐播放器 车载充电<br>播放器一拖二USB车充 汽车车载mp3音乐"];
    //价格
	var price=["￥34.80","￥79.90","￥32.90","￥119.00"];
	//重量
	var weight=[2360,5000,400];
    //用这种方式我就要获取加入图片的索引
	var milk=document.getElementsByClassName("milk")[0];//找到要追加位置的父元素
	var div=document.createElement("div");//创造购物篮容器div
	//使用前面的模板将创造好的图片元素追加进去
	//给节点添加属性改变需要改变的
    div.setAttribute("class","rice");//给div添加类名
    
    console.log(milk);
	//创建<br>元素
	var br=document.createElement("br");
	//创建<ul>元素
	var ul=document.createElement("ul");
	console.log(ul)
	//创建<input>元素
	var input=document.createElement("input");
	input.style.type="checkbox";
	input.setAttribute("class","checkbox");
	input.onchange=priming;
	console.log(input);
	//创建<img>元素
	var img=document.createElement("img");
	console.log(img);
	//创建<button>元素
	var button=document.createElement("button");
	console.log(button);
	//将7个<li>全部追加到<ul>里面
	for( var i=0;i<7;i++){
		var li=document.createElement("li");
	    ul.appendChild(li);
	}
	//把追加到ul里的li找到
	var lis=ul.getElementsByTagName("li");
	console.log(lis);
	//给每一个li添加属性
	//将单选框追加到第一个lis面
	lis[0].appendChild(input);
	//将img追加到第二个lis里面
	lis[1].appendChild(img);
	//把<br>追加进去
	div.appendChild(br);
	//把ul最加到div里面
    //获取添加节点类名，先输出瞄一下
	div.appendChild(ul);
	console.log(div);
	//追加一次就没有了，每次要复制一下
	
	//milk.appendChild(div);
    //这个方法好像行不通,老方法通过当前坐标获取
function add(n){
   
	//创建一个div节点
	var div=document.createElement("div");
	div.innerHTML=str;
	//拿到结构了，给div起个类名
	div.setAttribute("class","rice2");
	 console.log(div);
	 //通过当前节点找到图片节点并复制
	var img=n.parentNode.getElementsByTagName("img")[0];
	img=img.cloneNode(true);
	//要给这个图片设置大小，才能使用
	img.style.cssText="width:81px;height:81px;";
	console.log(img);
	//将图片追加到结构中的位置
	div.getElementsByTagName("li")[1].appendChild(img);
	//获取说明内容，复制.追加到指定位置
	var span=n.parentNode.getElementsByTagName("span")[0].innerHTML;
	//将span的内容放到结构中
    var p=document.createElement("span");
	p.innerHTML=span;
	console.log(p);
    div.getElementsByTagName("div")[0].appendChild(p);
    //找到要放入的位置
	//获取价格了
	var rmb=n.parentNode.getElementsByTagName("p")[0].innerHTML;
	console.log(rmb);
	div.getElementsByClassName("milk7")[0].innerHTML=rmb+"<br><select class='milk71'><option>促销</option></select>";
	var milk=document.getElementsByClassName("milk")[0];
	console.log(milk);
	milk.appendChild(div);//成了

}

function add2(n){
    console.log("正在添加");
    //保存一个结构
	
	//创建一个div节点
	var div=document.createElement("div");
	div.innerHTML=str;
	//拿到结构了，给div起个类名
	div.setAttribute("class","rice2");
	 console.log(div);
	 //通过当前节点找到图片节点并复制
	var img=n.parentNode.getElementsByTagName("img")[0];
	img=img.cloneNode(true);
	//要给这个图片设置大小，才能使用
	img.style.cssText="width:81px;height:81px;";
	console.log(img);
	//将图片追加到结构中的位置
	div.getElementsByTagName("li")[1].appendChild(img);
	//获取说明内容，复制.追加到指定位置
	var span=n.parentNode.getElementsByTagName("span")[0].innerHTML;
	//将span的内容放到结构中
    var p=document.createElement("span");
	p.innerHTML=span;
	console.log(p);
    div.getElementsByTagName("div")[0].appendChild(p);
    //找到要放入的位置
	//获取价格了
	var rmb=n.parentNode.getElementsByTagName("p")[0].innerHTML;
	console.log(rmb);
	div.getElementsByClassName("milk7")[0].innerHTML=rmb+"<br><select class='milk71'><option>促销</option></select>";
	var fish=document.getElementsByClassName("fish")[0];
	console.log(fish);
	fish.appendChild(div);//成了

}


    


function priming(){  //单选触发开关
    scan();
	}
//单个删除功能
function remove(n){
    //找到当前指定元素的祖先级div元素
	var divy=n.parentNode.parentNode.parentNode;
    var div_f=divy.parentNode;
	console.log(div_f);
	div_f.removeChild(divy); 
	scan();
}
//全部删除函数

function del(){
	//要先找到需要删除的内容
    var checkbox=document.getElementsByClassName("checkbox");
    var checkbox2=document.getElementsByClassName("checkbox2");
	console.log(checkbox[1]);
	console.log(checkbox2);
    for(var i=1,len=checkbox.length;i<len;i++){//判断当前元素是不是选中状态	
		    var ancestry=checkbox[i].parentNode.parentNode.parentNode;
			var grandpa=ancestry.parentNode;
			grandpa.removeChild(ancestry);
		} 
	
	for(var i=1,len=checkbox2.length;i<len;i++){//判断当前元素是不是选中状态
		if(checkbox2[i].checked==true){
		    var ancestry=checkbox2[i].parentNode.parentNode.parentNode;
			var grandpa=ancestry.parentNode;
			grandpa.removeChild(ancestry);
		 }
	} 
	console.log("删除函数");
	scan();
}